<script setup>
  import { onMounted, ref } from 'vue'
  import {
    onLoad,
    onShow,
    onReachBottom,
    onPullDownRefresh,
  } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import recommendation from './component/recommendation.vue'
  import expection from './component/expectation.vue'

  const activeIndex = ref(1)
  function chooseTab(index) {
    activeIndex.value = index
  }

  onShow(() => {})
</script>

<template>
  <view class="recommend-content">
    <view class="tabs">
      <view
        class="tab-item"
        style="margin-right: 22rpx"
        :class="{ 'tab-item-active': activeIndex == 1 }"
        @click="chooseTab(1)"
      >
        今日推荐
      </view>
      <view
        class="tab-item"
        :class="{ 'tab-item-active': activeIndex == 2 }"
        @click="chooseTab(2)"
      >
        万众期待
      </view>
    </view>
    <view class="" v-if="activeIndex == 1">
      <recommendation></recommendation>
    </view>
    <view class="" v-if="activeIndex == 2">
      <expection></expection>
    </view>
    <!-- <y-tabs v-model="activeIndex" sticky @change="">
			<y-tab class="y-tab-virtual" :title="'今日推荐'" name="1">
				
			</y-tab>
			<y-tab class="y-tab-virtual" :title="''" name="2">
				
			</y-tab>
		</y-tabs> -->
  </view>
</template>

<style lang="scss" scoped>
  .recommend-content {
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    .tabs {
      display: flex;
      align-items: center;
      justify-content: center;
      .tab-item {
        width: 160rpx;
        height: 60rpx;
        border-radius: 30rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        text-align: center;
        font-size: 24rpx;
      }
      .tab-item-active {
        background-color: $all-color !important;
        color: #fff;
      }
    }
    /* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
    .y-tab-virtual {
      position: relative;
      flex-shrink: 0;
      width: 100%;
      height: 100%;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(
          calc(-426rpx)
        ); /* 单个图片宽度 * 图片数量的一半 */
      }
    }
    ::v-deep .y-tabs__content {
      height: 100vh;
      // overflow: auto !important;
    }
    ::v-deep .y-tab__pane {
      overflow: auto;
      height: 100vh !important;
    }
    ::v-deep .y-tabs__wrap {
      background-color: transparent !important;
    }
    ::v-deep .y-tabs__scroll {
      width: 360rpx !important;
      height: 64rpx;
      left: 25%;
    }
    ::v-deep .y-tab {
      height: 64rpx !important;
      margin: 0 20rpx;
      color: #1a1a1a !important;
      font-weight: 500 !important;
      z-index: 9 !important;
    }
    ::v-deep .y-tabs__nav {
      border-radius: 32rpx;
      background-color: #f7f7f7;
    }
    ::v-deep .y-tabs__nav .is-active {
      border-radius: 32rpx !important;
      margin: 0 !important;
      padding: 0 34rpx !important;
      background-color: $all-color !important;
      color: #fff !important;
    }
    ::v-deep .y-tab__text {
      font-size: 28rpx;
    }
    ::v-deep .y-tabs__bar {
      display: none !important;
      // width: 50% !important;
      // height: 100% !important;
      // transform: translate3d(0,0,0) !important;
      // border-radius: 32rpx !important;
      // bottom: 0 !important;
      // background-color: #7863ff !important;
    }
  }
</style>
